<template>
  <div class="login-container">
    <el-card class="login-card">
      <div class="logo-box">
        <i class="el-icon-plane"></i>
      </div>
      <h2 class="title">航空订票系统</h2>
      <h3 class="subtitle">旅客登录</h3>
      <el-form
          :model="form"
          ref="loginForm"
          :rules="rules"
          label-position="top"
          class="login-form">
        <el-form-item prop="username">
          <el-input
              v-model="form.username"
              prefix-icon="el-icon-message"
              placeholder="请输入邮箱账号">
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
              v-model="form.password"
              prefix-icon="el-icon-lock"
              type="password"
              placeholder="请输入密码"
              @keyup.enter.native="login">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="login-btn" @click="login()">登录</el-button>
        </el-form-item>
        <!-- <div class="login-options">
          <el-link type="text">忘记密码?</el-link>
          <el-divider direction="vertical"></el-divider>
          <el-link type="primary">立即注册</el-link>
        </div> -->
      </el-form>
    </el-card>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "LoginView",
  created() {
    document.title = '航空订票系统 - 用户登录';
  },
  data() {
    return {
      form: {
        username: '111@qq.com',
        password: '111'
      },
      rules: {
        username: [
          { required: true, message: '请输入邮箱账号', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 20, message: '密码长度在 3 到 20 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    login() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          const params = new URLSearchParams();
          params.append('email', this.form.username);
          params.append('password', this.form.password);
          request.post('/UserLoginServlet', params).then(res => {
            if (res === 1) {
              this.$message({
                type: 'success',
                message: "登录成功",
                duration: 1500
              });
              localStorage.setItem('email', this.form.username)
              this.$router.push('/shop');
            } else {
              this.$message({
                type: 'error',
                message: "用户名或密码错误",
                duration: 2000
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.login-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #4299e1 0%, #2b6cb0 100%);
  background-image: url('../assets/plane-bg.jpg'); // 需要添加一张飞机背景图
  background-size: cover;
  background-position: center;
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
  }
}

.login-card {
  width: 420px;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.95);
  position: relative;
  backdrop-filter: blur(10px);
}

.logo-box {
  text-align: center;
  margin-bottom: 20px;
  
  .el-icon-plane {
    font-size: 48px;
    color: #4299e1;
    transform: rotate(-45deg);
  }
}

.title {
  text-align: center;
  color: #2d3748;
  margin-bottom: 10px;
  font-size: 24px;
}

.subtitle {
  text-align: center;
  color: #718096;
  margin-bottom: 30px;
  font-size: 16px;
  font-weight: normal;
}

.login-form {
  .el-form-item {
    margin-bottom: 25px;
  }
  
  .el-input {
    .el-input__inner {
      height: 45px;
      border-radius: 8px;
      
      &:focus {
        border-color: #4299e1;
      }
    }
  }
}

.login-btn {
  width: 100%;
  height: 45px;
  border-radius: 8px;
  font-size: 16px;
  background: #4299e1;
  border-color: #4299e1;
  
  &:hover {
    background: #63b3ed;
    border-color: #63b3ed;
  }
}

.login-options {
  text-align: center;
  margin-top: 20px;
  
  .el-link {
    font-size: 14px;
    margin: 0 10px;
  }
}
</style>